<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>排行榜</title>
    <style>
        body{
            text-align: center;
        }
        table{
            border: 1px solid black;
            margin: 0 auto;
            width: 680px;
            margin-bottom: 20px;
        }
        td{
            text-align: center;
        }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(function (){
            show()
        })

        let startPage = 1
        let keyWord = ""
        let pageCount = 0
        function changePage(flag){
            if(flag == "first"){
                startPage = 1
            }else if(flag == "last"){
                startPage = pageCount
            }else if(flag == "up"){
                startPage--
            }else if(flag == "down"){
                startPage++
            }
            show()
        }
        function changekeyWord(){
            keyWord = $('#keyWord').val()
            startPage = 1
            show()
        }

        function show(){
            $.getJSON("http://127.0.0.1:8080/restevent/query",
                {startPage:startPage,keyWord:keyWord}, function (res){
                $("tbody").empty()
                let hotevents = res.hotevents
                keyWord = res.keyWord
                pageCount = res.pageCount
                startPage = res.startPage
                $("#keyWord").val(keyWord)
                $("#pageCount").text(pageCount)
                $("#startPage").text(startPage)
                $(hotevents).each(function (i,item){
                    let tr = `<tr>
                        <td><a href="detail.html?id=${item.id}">${item.keyWord}</a></td>
                        <td>${item.searchNum}</td>
                        <td>${item.createDate}</td>
                    </tr>`
                    $("tbody").append(tr)
                })
            })
        }
    </script>
</head>
<body>
<div>
    关键字: <input type="text" name="keyWord" id="keyWord" />
    <input type="button" value="查询" onclick="changekeyWord()"/>
</div>
<h1>热点事件排行榜</h1>
<table border="1">
    <thead>
    <tr>
        <th>关键字</th>
        <th>搜索指数</th>
        <th>创建事件</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<div>
    <a href="javascript:void(0)" onclick="changePage('first')">首页</a>
    <a href="javascript:void(0)" onclick="changePage('up')">上一页</a>
    <a href="javascript:void(0)" onclick="changePage('down')">下一页</a>
    <a href="javascript:void(0)" onclick="changePage('last')">末页</a>
    第 <span id="startPage"></span> 页 / 共 <span id="pageCount"></span> 页
</div>
</body>
</html>
